<template>
  <div>
    <el-card>
      <el-row :gutter="10">
      <!--时间搜索-->
        <div class="block">
            <span class="demonstration">入库时间 ： </span>
            <el-date-picker
              v-model="pullTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd">
            </el-date-picker>

            <el-button class="searchbtn" @click="searchPullBoxDetail" type="primary" icon="el-icon-search" style="margin-left: 10px;">搜索</el-button>
            <el-button @click="exportExcel" type="primary">导出</el-button>
          </div>

      </el-row>
      <el-table :data="pullOrderBoxList" id="out-table" border>
        <el-table-column label="入库详情编号" prop="pullOrderDetailCode" min-width="180"></el-table-column>
        <el-table-column label="入库明细编号" prop="boxDetailCode" min-width="220"></el-table-column>
        <el-table-column label="物品名称" prop="productName" min-width="100"></el-table-column>
        <el-table-column label="物品编号" prop="productCode" min-width="100"></el-table-column>
        <el-table-column label="货架名称" prop="shelveName" min-width="50"></el-table-column>
        <el-table-column label="货架行" prop="shelveHeight" min-width="80"></el-table-column>
        <el-table-column label="货架列" prop="shelveWidth" min-width="80"></el-table-column>
        <el-table-column label="数量" prop="unintCount" min-width="80"></el-table-column>
        <el-table-column label="入库状态" prop="boxDetailStatus" min-width="80"></el-table-column>
        <el-table-column label="入库时间" prop="pullTime" min-width="200"></el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pullOrderBoxListForm.pageNum"
        :page-sizes="[10, 20, 30, 40]" :page-size="pullOrderBoxListForm.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

    </el-card>
  </div>
</template>

<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
    name: 'PullBoxReport',
    data() {
      return {
        pullOrderBoxList: [],
        total: 0,
        pullOrderBoxListForm: {
          pageNum: 1,
          pageSize: 10
        },
        pullTime: ''

      }
    },
    methods: {
      async pullBoxDetailReport() {
        console.log('mymethods')
        const res = await this.$apiUtil.postByJson('warehouseReport/pullBoxDetailReport', this.pullOrderBoxListForm)
        console.log(res)
        if (res.code !== '200') {
          return this.$message.error(res.msg)
        }
        this.pullOrderBoxList = res.data.pullOrderBoxDetailVOS
        this.total = res.data.totalSize
      },
      async searchPullBoxDetail() {
        if (this.pullTime === '') {
        this.pullOrderBoxListForm.pullTime = null
        } else {
          this.pullOrderBoxListForm.pullTime = this.pullTime
        }
        console.log(this.pullOrderBoxListForm)
        const res = await this.$apiUtil.postByJson('warehouseReport/pullBoxDetailReport', this.pullOrderBoxListForm)
        console.log(res)
        this.pullOrderBoxList = res.data.pullOrderBoxDetailVOS
         },
      handleSizeChange (newSize) {
        console.log(newSize)
        this.pullOrderBoxListForm.pageSize = newSize
        this.pullBoxDetailReport()
      },
      handleCurrentChange (newPage) {
        console.log(newPage)
        this.pullOrderBoxListForm.pageNum = newPage
        this.pullBoxDetailReport()
      },
      // 定义导出Excel表格事件
      exportExcel() {
      /* 从表生成工作簿对象 */
      var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
      /* 获取二进制字符串作为输出 */
      var wbout = XLSX.write(wb, {
          bookType: 'xlsx',
          bookSST: true,
          type: 'array'
      })
      try {
          FileSaver.saveAs(
          // Blob 对象表示一个不可变、原始数据的类文件对象。
          // Blob 表示的不一定是JavaScript原生格式的数据。
          // File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
          // 返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
          new Blob([wbout], { type: 'application/octet-stream' }),
          // 设置导出文件名称
          '出库明细.xlsx'
          )
      } catch (e) {
          if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout
      }

    },

    created() {
      console.log('created')
      this.pullBoxDetailReport()
    }

}
</script>

<style scoped>

</style>
